<template>
	<scroll-view scroll-y="true" @scroll="scroll" :scroll-top="scrollTop" @scrolltolower="loadMore" :style="'height:' + scrollH + 'px;'">
		<!-- <view :style="'height:' + scrollH + 'px;'" v-show="searchList.length==0"></view> -->
		<template>
			<view v-show="isShowLoading" class="" :style="'height:' + scrollH + 'px;background-color: #f5f5f5;'">
				<view class="d-flex a-center j-center" style="height: 600upx;">
					<image src="../../../static/images/loading1.gif" style="height: 75upx;width: 75upx;"></image>
				</view>
			</view>
		</template>
		<view class="px-3 pt-3" v-show="!isShowLoading">
			<newsSlide v-for="(item,index) in searchList" :key="index" :item="item" :index="index"></newsSlide>
			<!-- 加载更多 -->
			<view class="d-flex a-center j-center font-md py-2">{{ currentLoadText }}</view>
		</view>
	</scroll-view>
</template>

<script>
	import api from '@/common/lib/request.js';
	import newsSlide from "@/components/module/news-item.vue"
	export default {
		name: "search",
		data() {
			return {
				scrollTop: 0,
				scrollH: 500,
				searchDate: "财经",
				searchList: [],
				currentPageNo: 1,
				old: {
					scrollTop: 0
				},
				isShowLoading: false,
				currentLoadText: '上拉加载更多',
				loadStatus: ['上拉加载更多', '加载中', '没有更多了'],
				titleList: []
			}
		},
		components: {
			newsSlide
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight;
					console.log(this.scrollH)
				}
			});
			this.__initChannelList(option)

		},
		onShow() {

		},
		methods: {
			loadMore() {
				if (this.currentLoadText !== '上拉加载更多') {
					return;
				}
				this.currentLoadText = this.loadStatus[1];
				this.__initChannelContentList(this.currentPageNo, this.channelId);
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			__initChannelList(data) {
				if (this.currentPageNo === 1) {
					this.isShowLoading = true;
				}
				api.request({
						url: '/channel/list'
					})
					.then(response => {
						if (response.length > 0) {
							this.titleList = response;
							var filterArr = this.titleList.filter(item => item.channelName == data.title)
							if(filterArr.length > 0){
								this.channelId = this.titleList.filter(item => item.channelName == data.title)[0].channelId
								this.__initChannelContentList(this.currentPageNo, this.channelId)
							}else{
								this.isShowLoading = false
								this.currentLoadText = this.loadStatus[2]
							}
							
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			//初始化栏目列表页
			__initChannelContentList(pageNo, channelId) {
				const _this = this;
				api.request({
						url: '/channel/contents',
						data: {
							page: pageNo,
							channelId: channelId
						}
					})
					.then(response => {
						// if(idx !== _this.tabIndex) return;
						console.log(response)
						if (response.length > 0) {
							_this.searchList = [..._this.searchList, ...response];
							_this.currentPageNo++;
							_this.currentLoadText = _this.loadStatus[0];
							_this.isShowLoading = false;
						} else {
							_this.currentLoadText = _this.loadStatus[2];
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
		}
	}
</script>

<style scoped>
	.custom-input {
		width: 100%;
		height: 70upx;
		background: #EEEEEE;
	}

	.search-wrap {
		width: 70upx;
		background: #EEEEEE;
		text-align: center;
		padding: 6upx;
	}
</style>
